<template>
	<view class="content">
		<view>
            <text class="title">{{field}}</text>
        </view>
		
		<view>
			<map class="map" :latitude="latitude" :longitude="longitude" :scale="size" :markers="bird" ></map>
		</view>
		
		<view>
		<text class="text">{{time}}</text>
		</view>
		
		<view>
			<text class="default">经度坐标:[[  {{latitude}}  ]]</text> </br>
			<text class="default">纬度坐标:[[  {{longitude}}  ]]</text>
		</view>
		
		<view>
			<button @click="show">定位到必得</button>
		</view>
		<view>
			<button type="default" @click="setDate">提交数据</button>
		</view>
		<view>
			<button type="default" @click="add">放大</button>
			<button type="default" @click="sub">缩小</button>
			<button type="default" @click="saoma">扫码</button>
		</view>
	</view>
</template>

<script>
	var self;
	export default {
		data() {
			return {
				field: '欢迎',
				 latitude:39.909,
				 longitude:116.39742,
				size:16,
				time: "00:00:00",
				bird:[{
					latitude : 32.019405,
					longitude : 118.861743,
					iconPath : "/static/logo.png",
					width : 50,
					callout:{
						content:"必得大厦附近",
					}
					
				}]
		}
		},
		onLoad() {
		setInterval(this.showtime,1000);
        self = this;
		},
		methods: {
			
			saoma:function(){
				uni.scanCode({
					success:function(res){
						console.log("扫码成功");
						console.log(res.result);
					},
					fail:function(){
						console.log("扫码失败");
					}
				})
			},
			setDate:function(){
				uni.getLocation({
					type:"gcj02",
					geocode:true,
					success:function(res){
					   self.latitude =  res.latitude;
					   self.longitude = res.longitude;
					   console.log(res.address.streetNum);  
					   uni.request({
					    	url:"https://m30893.jp.cdjxt.net/uniappi/test",
					    	method:"POST",
					   	header:{
					   		"content-type":"application/x-www-form-urlencoded"
					   	},
					   	data:{
					   		latitude: self.latitude,
					   		longitude: self.longitude,
					   		streetNum: res.address.streetNum,
					   	},
					   });
					}
				});
				
			},
		  showtime:function(){
			  var date = new Date();
			  var dangqiantime = date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
			  self.time = dangqiantime;
		  },
          show:function(){
			  self.field = "切换定位成功";
			  console.log("切换到必得");
			  self.latitude = 32.019405;
			  self.longitude =118.861743;
		  },
		  add:function(){
		  	self.size=self.size<=17?self.size+1:18;
		  },
		  sub:function(){
		  	self.size=self.size>=6?self.size-1:5;
		  }	
		}
		
	}
</script>

<style>
	.content {
		text-align: center;
		height: 400upx;
	}
    .logo{
        height: 200upx;
        width: 200upx;
        margin-top: 200upx;
    }
	.title {
		font-size: 36upx;
		color: #000000;
	}
	.map{
		height: 600px;
		width: 400px;
		margin: 0 auto;
	}
	.text{
		font-size: 20px;
		background-color: #007AFF;
	}
</style>
